import React, { Component, Fragment } from "react";
// antd
import { Table, Button, Col, Pagination, Form, Tag, Input, Space, Menu, Dropdown } from "antd";
// http
import http from '../../../utils/request';
import Action from "@c/buttonAction/Index";
import { DownOutlined } from '@ant-design/icons';
import ExportJsonExcel from "js-export-excel";
import { pagination_size_option } from "../../../utils/common"


class InnerRecord extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,

            // 分页
            total: '',
            page: 1,
            page_number: 10,

            // 搜索
            search_domain_name: null,
            search_record_value: null,

            // 表格
            dataSource: [],
            columns: [
                {title: "云平台", dataIndex: "platform", key: "platform",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "区域", dataIndex: "region", key: "region"},
                {title: "域名", dataIndex: "domain_name", key: "domain_name"},
                {title: "记录类型", dataIndex: "record_type", key: "record_type"},
                {title: "记录值", dataIndex: "record_value", key: "record_value"}
            ],
        }
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'domain_name__contains': this.state.search_domain_name,
            'record_value__contains': this.state.search_record_value
        }
    
        // 获取列表
        http.get('/cloud/domain_inner', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

     /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_domain_name: data.domain_name ? data.domain_name : null,
            search_record_value: data.record_value ? data.record_value : null,
            page: 1
        })
        this.loadData()
    }

    // 证书检测
    // onSslCheckBtn = (rowData) => {
    //     this.setState({loading: true})
    //     const requestData = {
    //         operation_type: 'get_ssl_check'
    //     }
    //     http.patch('/cloud/domain_inner', {params: requestData}).then(response=>{
    //         this.setState({loading: false})
    //     })
    // }

    // 一键导出
    onexportExcelBtn = () => {
        // 不同云产品添加自定义字段
        const _domain_sheet_filter = ['platform', 'account_name', 'business', 'region', 'record_type', 'domain_name', 'record_value']
        const _domain_sheet_header = ['云平台', '云账户', '业务线', '区域', '记录类型', '记录名称', '记录值']

        let option = {}
        option.fileName = '内网域名解析记录'
        option.datas = [
            {
                sheetData: this.state.dataSource,
                sheetName: option.fileName,
                sheetFilter: _domain_sheet_filter,
                sheetHeader: _domain_sheet_header
            }
        ]
        var toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel()
    }

    render(){
        const { loading, columns, dataSource, page, total } = this.state
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        var myStyleForm = {marginRight: '10px', marginTop: '5px'}

        const operations = (
            <Menu
                items={[
                    // {
                    //     label: (
                    //         <Action.Button onClick={() => this.onSslCheckBtn()}>证书检测</Action.Button>
                    //     ),
                    //     key: '0',
                    // },
                    {
                        label: (
                            <Action.Button onClick={() => this.onexportExcelBtn()}>导出页面数据</Action.Button>
                        ),
                        key: '0',
                    }
                ]}
            />
        );

        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch} size="small">  

                    <Form.Item label="域名" name="domain_name" style={myStyleForm}>
                        <Input placeholder="请输入域名"  />
                    </Form.Item> 

                    <Form.Item label="记录值" name="record_value" style={myStyleForm}>
                        <Input placeholder="请输入记录值"  />
                    </Form.Item>                 

                    <Form.Item shouldUpdate={true} style={myStyleForm}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}>
                    <Dropdown overlay={operations}>
                        <Action.Button>
                            <Space>
                                更多操作
                                <DownOutlined />
                            </Space>
                        </Action.Button>
                    </Dropdown>
                </div>

                <Table
                    size="small"
                    pagination={false} 
                    rowKey="id"
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: 800 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            pageSizeOptions={pagination_size_option}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>
            </Fragment>
        )
    }
}

export default InnerRecord;